
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}


body {
    background-color: rgba(255, 255, 255, 0.996078431372549);
    background-image: url('./images/bg1.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-origin: border-box;
    position: relative;
    left: 0;
    text-align: left;
}

.maxbig {
    position: relative;
    width: 100%;
    height: 100%;


}

.maxbig .dinbudaohang {
    width: 100%;
    height: 120px;
    /*background-image: url("../images/bs.png");*/

    background-position: center;
}

.dinbudaohang .dinbudaohang1 {
    height: 80px;
    width: 33.33%;
    float: left;

}

.dinbudaohang .dinbudaohang1 p {
    font-size: 50px;

    margin-left: 80px;
    margin-top: 5px;

}


a {
    font-family: '华文细黑';
    text-decoration: none; /* 去掉下划线 */

    font-family: "Your Artistic Font", cursive; /* 替换成你想要的艺术字体名称 */
    background: linear-gradient(to right, red, blue); /* 设置背景为水平渐变色，起始颜色为红色，结束颜色为蓝色 */
    -webkit-background-clip: text; /* 应用背景渐变色到文本 */
    -webkit-text-fill-color: transparent; /* 将文本颜色设置为透明，以便显露出背景渐变色 */


}


a:hover {
    color: cornflowerblue; /* 设置鼠标悬停时链接文字颜色 */
    text-decoration: underline; /* 添加下划线 */
}

.dinbudaohang .dinbudaohang2 {
    height: 80px;
    width: 33.33%;
    float: left;

}

.dinbudaohang .dinbudaohang2 p {
    font-size: 32px;

    color: cornflowerblue;
    margin-left: 75px;
    margin-top: 30px;
    font-family: "Your Artistic Font", cursive; /* 替换成你想要的艺术字体名称 */
    background: linear-gradient(to right, blue, lightpink); /* 设置背景为水平渐变色，起始颜色为红色，结束颜色为蓝色 */
    -webkit-background-clip: text; /* 应用背景渐变色到文本 */
    -webkit-text-fill-color: transparent; /* 将文本颜色设置为透明，以便显露出背景渐变色 */


}


.dinbudaohang .dinbudaohang3 {
    height: 80px;
    width: 33.33%;
    float: left;

}

.dinbudaohang .dinbudaohang3 p {
    font-size: 50px;

    margin-left: 180px;
    margin-top: 5px;

}
.fz{
    opacity: 0;
}

.zuti,.citi {
    position: absolute;
    backface-visibility: hidden;
}

.zuti {
    min-height: 30px;
    min-width: 450px;
    height: auto;
    width: auto;
    max-width: 40%;
    top: 20%;
    left: 30%;
    border-radius: 10px;
    font-size: 22px;
    font-style: italic;
    font-weight: lighter;
    background: rgb(255, 255, 255, 0.6);
}

.citi {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0);
    transform: rotateY(180deg);
}

.zuti .t_name {
    width: 100%;
    height: 150px;

}

#main_div {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.5s;
    transform-origin: center;
    animation-name: changecolor; /* 应用动画 */
    animation-duration: 6s;
    animation-iteration-count: 1; /* 只执行一次动画 */
    animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
}
canvas {
    width: 100%;
    height: 100%;
}

@keyframes changecolor {
    0% {
        background-color: rgb(0, 0, 0, 0.2);
    }
    33% {
        background-color: rgb(0, 0, 0, 0.3);
    }
    67% {
        background-color: rgb(0, 0, 0, 0.4);
    }
    100% {
        background-color: rgb(0, 0, 0, 0.5);
    }
}

.flip {
    transform: rotateY(180deg);
}



.t_name .tyu {
    width: 150px;
    height: 150px;

    float: right;
}


.t_name .tyu img {
    width: 150px;
    height: 150px;

}

.t_name .twenz {
    height: 150px;
    width: 1200px;
    color: ghostwhite;
    float: right;
}

.t_name .twenz p {
    font-size: 23px;
    font-family: 'Comic Sans MS Oblique', 'Comic Sans MS Normal', 'Comic Sans MS', sans-serif;
    margin-top: 5px;
    margin-bottom: 1px;
    font-style: italic;

}

.zuti .introduce {
    width: 100%;
    height: 150px;


}

.introduce .inb {
    width: 150px;
    height: 150px;
    float: left;

}

.introduce .inwenz {
    height: 150px;
    width: 1200px;
    margin-left: 40px;
    float: left;
    word-wrap: break-word;

}

.introduce .inwenz p {
    font-size: 23px;
    font-family: 'Comic Sans MS Oblique', 'Comic Sans MS Normal', 'Comic Sans MS', sans-serif;
    margin-top: 5px;
    margin-bottom: 1px;
    margin-top: 30px;
    font-style: italic;
    color: ghostwhite;

}

.introduce .inb img {
    width: 150px;
    height: 150px;

}

.zuti .team-name {
    width: 100%;
    height: 100%
}

.team-name .n1 {
    position: absolute;
    width: 30%;
    height: 30%;
    background-color: rgb(255, 255, 255, 0.7);
    border-radius: 10px;
}

.n1:nth-child(1) {
    left: 35%;
    top: 35%;
}

.n1:nth-child(2) {
    left: 0;
    top: 0;
}


.n1:nth-child(3) {
    right: 0;
    top: 0
}

.n1:nth-child(4) {
    bottom: 0;
    left: 0;
}

.n1:nth-child(5) {
    bottom: 0;
    right: 0;
}

.n1 .nn1 {
    width: 260px;
    height: 78px;
    margin-top: 10px;
}

.nn1 .nnn1 {
    float: left;
    height: 90px;
    width: 90px;
    margin-left: 10px;
    margin-top: 0px;

}

.nn1 .nnn1 img {

    height: 90px;
    width: 90px;

    margin-top: 0px;

}


.nn1 .nnn2 {
    position: absolute;
    right: 5%;
    height: 78px;
    width: 60%;
    border-radius: 10px;
    font-weight: lighter;
    font-style: italic;
}


.nn1 .nnn2 p {
    width: 100%;
    font-size: 25px;
    text-align: left;
    color: ghostwhite;
}


.n1 .nn2 {
    position: absolute;
    bottom: 0;
    height: 50%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 0 0 10px 10px;
    margin-bottom: 0px;
}

.n1 .nn2 p {
    margin-top: 0px;
    margin-bottom: 0px;

}

#sakura-canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999; /* 设置一个较高的层级值，确保在其他内容之上显示 */
}




